<template>
  <div class="submit-faq max-w-5xl 2xl:max-w-6xl mx-auto">
    <h2 class="text-3xl text-gray-1000 font-semibold text-center">
      <span class="text-gray-1000 font-semibold text-34 break-words w-full">
        {{$t('submit_faq')}}
      </span>
    </h2>
    <div class="mt-12">
      <dl class="space-y-5 divide-y divide-gray-1600 hover:divide-y">
        <div v-for="(faq, key) in faqs.submit"
          :key="`faq-${key}`"
          class="pt-5">
          <dt class="flex items-start justify-between text-left text-xl leading-6 font-semibold text-gray-1000 hover:text-purple-1300 cursor-pointer"
            :class="{'text-purple-1300': faq.show,'opacity-90': faq.show }"
            :key="key"
            @click="show(key)">
            <span>{{$t(faq.question)}}</span>
            <span class="flex justify-center h-8 ml-8 -mt-1"
              :class="{'text-purple-1300': faq.show,'text-gray-1800': !faq.show }">
              <svg xmlns="http://www.w3.org/2000/svg"
                class="h-8 w-8"
                fill="none"
                viewBox="0 0 24 24"
                stroke-width="1.5"
                stroke="currentColor"
                aria-hidden="true"
                v-if="!faq.show">
                <path stroke-linecap="round"
                  stroke-linejoin="round"
                  d="M12 6v12m6-6H6"></path>
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg"
                class="h-8 w-8"
                fill="none"
                viewBox="0 0 24 24"
                stroke-width="1.5"
                stroke="currentColor"
                aria-hidden="true"
                v-if="faq.show">
                <path stroke-linecap="round"
                  stroke-linejoin="round"
                  d="M18 12H6"></path>
              </svg>
            </span>
          </dt>
          <dd class="mt-2 text-base text-gray-1000"
            v-if="faq.show">
            <p v-for="(item, dKey) in faq.answer"
              :key="dKey"
              :class="{'mt-3': dKey !== 0}">
              {{$t(item)}}
            </p>
          </dd>
        </div>
      </dl>
    </div>

  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'SubmitFaq',
  props: {},
  computed: {
    ...mapState({
      locale: (state) => state.locale,
    }),
  },
  data() {
    return {
      faqs: {
        submit: [
          {
            question: 'submit_faq01_title',
            answer: ['submit_faq01_desc'],
            show: false,
          },
          {
            question: 'submit_faq02_title',
            answer: ['submit_faq02_desc'],
            show: false,
          },
          {
            question: 'submit_faq03_title',
            answer: ['submit_faq03_desc'],
            show: false,
          },
          {
            question: 'submit_faq04_title',
            answer: ['submit_faq04_desc'],
            show: false,
          },
          {
            question: 'submit_faq05_title',
            answer: ['submit_faq05_desc01', 'submit_faq05_desc02'],
            show: false,
          },
          {
            question: 'submit_faq06_title',
            answer: ['submit_faq06_desc01', 'submit_faq06_desc02'],
            show: false,
          },
          {
            question: 'submit_faq07_title',
            answer: ['submit_faq07_desc'],
            show: false,
          },
          {
            question: 'submit_faq08_title',
            answer: ['submit_faq08_desc'],
            show: false,
          },
          {
            question: 'submit_faq09_title',
            answer: ['submit_faq09_desc'],
            show: false,
          },
        ],
        advertise: [],
        business: [],
      },
    }
  },
  methods: {
    show(key) {
      this.faqs.submit[key].show = !this.faqs.submit[key].show
    },
  },
}
</script>